<template>

	<view class="grd-grd-parent">
			
			  <view class="grd-parent">
				<view class="parent" v-for="(item,index) in evengoods" :key="index" >
				  <view @click="toDetail(item.id)" hover-class="navigator-hover">
					<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFill" :src="item.url"
					@error="imageError"></image>
					<view class="">
					  <text class="small-text">商品名称</text><text class="small-price">{{item.name}}</text>
					</view>
					<view class="image-price">
					  <text class="small-text">商品价格</text>	<text class="small-price">{{item.price}}</text>
					</view>
				  </view>
				</view>   
			  </view>
	
	  
			 <view class="grd-parent">
				<view class="myparent" v-for="(item,index) in oddgoods" :key="index" >
				  <view @click="toDetail(item.id)" hover-class="navigator-hover">
					<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFill" :src="item.url"
					@error="imageError"></image>
					<view class="">
					  <text class="small-text">商品名称</text><text class="small-price">{{item.name}}</text>
					</view>
					<view class="image-price">
					  <text class="small-text">商品价格</text>	<text class="small-price">{{item.price}}</text>
					</view>
				  </view>
				</view>   
			 </view>
		
		
	</view>
</template>

<script>	
	export default {
		data() {
			return {
				src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
				goods:[],
				oddgoods: [],
				evengoods:[]
			}
		},
		
		onShow:function(){
			this.getData();
		},
		
		methods: {
			//接受数据
			async getData () {
				const res = await this.$myRuquest({
					url: '/good/findAll'
				})
				console.log(res);
				var list1 = res.data.filter(function (element, index, self) {
					if(index%2===1 ){
						return self
					}
				});
				var list2 = res.data.filter(function (element, index, self) {
					if(index%2!==1 ){
						return self
					}
				});
				this.oddgoods = list1;
				this.evengoods = list2;
				this.goods = res.data;
			},
			
			img(){
				uni.chooseImage({
					count: 3,
					sizeType: "compressed" ,
					success:res=>{
						console.log(res)
						this.msg = res
					}
				})
			},
			local(){
				uni.getLocation({
					success:res=>{
						console.log(res)
						this.msg = res
					}
				})
			},
			imageError: function(e) {
			            console.error('image发生error事件，携带值为' + e.detail.errMsg)
			        },
			toDetail(id){
			    uni.navigateTo({
			    	url:"../detail/detail?id="+id
			    })
			},
			async searchThem(data){
				const res = await this.$myRuquest({
					url: '/good/findByNameLike',
					method: 'post',
					data: data
				})
				var list1 = res.data.filter(function (element, index, self) {
					if(index%2===1 ){
						return self
					}
				});
				var list2 = res.data.filter(function (element, index, self) {
					if(index%2!==1 ){
						return self
					}
				});
				this.oddgoods = list1;
				this.evengoods = list2;
			}
		},
		onNavigationBarButtonTap(obj) {
		            console.log(obj)
		        },
		onNavigationBarSearchInputChanged (obj) {
			var data = {
				name: obj.text
			}
			this.searchThem(data);
		}
	}
</script>

<style>
	.content{
		background-color: white;
	}
	
  .grd-grd-parent{
    display: flex;
    justify-content: space-between;
  }

	.grd-parent{
    flex-direction: column;
    justify-content: center;
  }

	.parent{
		padding: 10px;
		margin: 10px;
		background-color: #FFFFFF;		
	}
	.myparent{
		padding: 10px;
		margin: 10px;
		background-color: #FFFFFF;
	}
		
	.small-text {
		color: #808080;
		font-size: small;
	}
	.small-price{
		color: #F0AD4E;
		font-size: large;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		width: 200px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
